.rt-testimonials {
  position: relative;
  width: 100%; /* without this, a parent page that puts .content (or any
		ancestor) in a flex/grid context can let this shrink to fit its own
		(JS-shrink-wrapped) content instead of stretching full-width -- seen
		live on a production page where the carousel rendered left-aligned
		with a lopsided gap on the right instead of centered. Forcing 100%
		here means the width our JS measures off .rt-testimonials__inner is
		always the page's true available width, not a shrunk one. */
  margin: 0 auto;
  /*padding: 2.5rem 3.25rem;*/
  box-sizing: border-box;
  font-family: Georgia, "Times New Roman", serif;
}
.rt-testimonials *,
.rt-testimonials *::before,
.rt-testimonials *::after {
  box-sizing: inherit;
}
.rt-testimonials__inner {
  position: relative;
}

.rt-testimonials__header {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 2em;
}
.rt-testimonials__title {
  font-family: "Playfair Display", serif;
  font-size: 2em;
  color: var(--color_p);
  margin: 0 0 20px;
}
.rt-testimonials__intro {
  font-family: "Barlow", sans-serif;
  font-size: 1.1em !important;
}

.rt-testimonials .rt-swiper {
  /* This element intentionally does NOT carry Swiper's own boilerplate
	   "swiper-container" class (only ours, .rt-swiper) -- confirmed live
	   that generic, un-scoped class collides with an unrelated carousel's
	   CSS/JS on at least one production host page (a !important margin
	   rule, re-applied by that page's own script even after we fought it
	   with an inline !important of our own). Swiper 4's JS only needs an
	   element reference, not that specific class, so dropping it removes
	   the collision at the source. position:relative replaces the one
	   base rule swiper.min.css's .swiper-container selector would have
	   given us (needed as the positioning context for Swiper internals).
	   .swiper-wrapper/.swiper-slide can't be renamed the same way --
	   Swiper's JS looks for those two by literal class name. */
  position: relative;
  overflow: hidden;
}

/* Pre-JS fallback only: testimonials.js's applySlideWidths() computes the
   exact width that divides the container into whole 300-365px cards (no
   partial card at the edge) and overrides this with an inline style right
   after init. This just avoids a flash of unstyled slides before that runs. */
.rt-testimonials .swiper-slide {
  width: 340px;
  flex-shrink: 0;
}

.rt-card {
  /* Explicit, not just inherited from .rt-testimonials's border-box: Swiper's
	   own base CSS sets box-sizing: content-box directly on .swiper-wrapper
	   (a real ancestor between .rt-testimonials and this element), which
	   breaks the inherit chain right there -- confirmed live that height
	   below was rendering 64px taller than declared (40px+20px padding +
	   4px border-top) because of it. .rt-card--story already sidesteps this
	   the same way. */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 340px;
  background: rgba(0, 0, 0, 0.03);
  border-top: 4px solid var(--color_a);
  padding: 40px 8% 20px;
}

.rt-card__quote-mark {
  font-family: "Playfair Display", serif;
  font-size: 8em;
  line-height: 1;
  color: var(--color_a);
  font-weight: 800;
  position: absolute;
  z-index: 1;
  top: -30px;
  left: 10px;
  opacity: 0.2;
}

p.rt-card__quote {
  font-size: 0.9em;
  color: var(--color_pd1);
  position: relative;
  z-index: 2;
  font-style: italic;
}

.rt-card__meta {
  margin-top: 1rem;
  border-top: 1px solid rgba(22, 41, 79, 0.15);
  padding-top: 0.75rem;
}

p.rt-card__author {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 0.75em;
  color: var(--color_p);
}

p.rt-card__location {
  margin: 0.15rem 0 0.65rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  color: #6b6b6b;
}

.rt-card__link {
  display: inline-block;
  font-family: "Barlow", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color_a);
  text-decoration: none;
  border-bottom: 1px solid var(--color_a);
  padding-bottom: 2px;
}

.rt-card__link:hover,
.rt-card__link:focus {
  color: var(--color_p);
  border-bottom: 1px solid var(--color_p);
}
.rt-card__link i {
  margin-right: 0.35rem;
  color: var(--color_a);
}

/* Swiper pagination dots, recolored */
.rt-testimonials .swiper-pagination-bullet-active {
  background: var(--rt-gold);
}

/* Prev/Next arrows: a centered control row in normal flow BELOW the cards,
   not overlays pinned to the card row's sides. As absolute overlays there
   was nowhere to put them that worked -- inside .rt-swiper they sat on top
   of the end cards, and beside it they were cut off by that box's own
   overflow:hidden. In flow they also stop depending on top:50%, which was
   a card-height-sensitive guess that needed a separate mobile override.
   Always visible now: the old opacity:0-until-:hover made sense for an
   overlay, but here it would leave a blank strip under the carousel, and
   touch devices have no hover to reveal them with. */
.rt-testimonials__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  /* Breathing room under the row. The arrows are the last thing this
     widget draws, so on the host page they otherwise sit flush against
     whatever follows -- the "Share your story" button, in practice.
     Larger than the top margin on purpose: the gap above separates the
     arrows from the cards they belong to, the one below separates them
     from unrelated page content. */
  margin-bottom: 3rem;
}

.rt-nav {
  /* Overlay positioning is the FALLBACK, not the target layout: the v1 page
	   (testimonials.html + testimonials.js) shares this stylesheet and still
	   ships its arrows inside .rt-swiper with no nav row, so stripping this
	   would drop them into that page's slide flow. .rt-testimonials__nav
	   .rt-nav below overrides it wherever the row does exist. */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  opacity: 0;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--color_p);
  background: rgba(255, 255, 255, 0.8);
  color: var(--color_p);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s linear;
}

.rt-nav:hover {
  background: var(--color_p);
  color: #fff;
}

/* Overlay-only leftovers, kept for the pages that still have no nav row. */
.rt-testimonials__inner:hover .rt-nav {
  opacity: 1;
}
.rt-nav--prev {
  left: 0;
}
.rt-nav--next {
  right: 0;
}

/* The nav row's own arrows: back into normal flow, and always visible. */
.rt-testimonials__nav .rt-nav {
  position: static;
  transform: none;
  opacity: 1;
}

.rt-testimonials__status {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  color: #6b6b6b;
  text-align: center;
  padding: 2rem 0;
}

@media (max-width: 640px) {
  /* 1rem, not the old 2.75rem: a 300px minimum card plus 2.75rem of padding
	   on each side overflows a 360px phone. The arrows no longer need side
	   room at all now that they sit below the cards. */
  .rt-testimonials {
    padding: 2rem 1rem;
  }
  .rt-testimonials .swiper-slide {
    width: 100%;
    max-width: 365px;
    min-width: 300px;
  }
  .rt-testimonials__nav {
    margin-top: 1.25rem;
    margin-bottom: 2.25rem;
  }

  /* Overlay fallback only (v1 page). Story cards are full-width on mobile,
	   so top:50% would drop the arrows over the scrollable summary text;
	   pin them to the avatar's center instead (40px card padding + half of
	   the 140px avatar). Irrelevant once the arrows are in the nav row. */
  .rt-testimonials[data-widget-type="story"] .rt-nav {
    top: 110px;
  }
  .rt-testimonials__nav .rt-nav {
    top: auto;
  }
}

/* ==========================================================================
   Story cards (second .rt-testimonials widget: photo + lead + summary,
   instead of a plain pull-quote). New classes only — .rt-card, .rt-card__meta,
   .rt-card__author, .rt-card__location, .rt-card__link, .rt-card__quote-mark
   and .rt-card__quote are all reused as-is from the block above.
   ========================================================================== */

.rt-card--story {
  /* Fixed height so every slide is the same size; the summary
	   paragraph(s) scroll internally (.rt-card__scroll) instead of
	   growing the card when a story runs longer than that. border-box so
	   this height is the actual rendered box, padding/border included. */
  box-sizing: border-box;
  height: 550px;
}

.rt-card--story .rt-card__top {
  flex: 0 0 auto;
}

.rt-card--story .rt-card__meta {
  flex: 0 0 auto;
}

.rt-card__avatar {
  display: block;
  width: 140px;
  height: 140px;
  margin: 0 auto 16px;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  z-index: 2;
  /* Animated skeleton while the (often remote, multi-MB uploaded) photo is
     still downloading, instead of sitting blank/broken for however long
     that takes. Pure CSS -- an <img>'s own background paints behind its
     decoded content, so this just disappears under the real photo the
     instant it's ready, no load-event JS needed. Keeps animating even
     after that (nothing un-hides a background once painted over), which
     is a no-op cost, not a visible one. */
  background: linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.06) 30%,
    rgba(0, 0, 0, 0.12) 50%,
    rgba(0, 0, 0, 0.06) 70%
  );
  background-size: 300% 100%;
  animation: rt-avatar-shimmer 1.4s ease-in-out infinite;
}
@keyframes rt-avatar-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.rt-card--story .lead {
  text-align: center;
  margin: 0 0 12px;
}

/* Shared by both card types (not just .rt-card--story): a fixed-height
   card plus this scrollable wrapper around its text means a longer-than-
   usual quote or summary scrolls internally instead of overflowing past
   the card's own background -- confirmed live that plain quote cards hit
   this too once a longer testimonial came through, not just stories. */
.rt-card__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.rt-card__audio {
  display: block;
  width: 100%;
  height: 32px;
  margin: 0.5rem 0;
}

@media (max-width: 640px) {
  .rt-card--story {
    height: 480px;
  }
  /* Native <audio> controls are OS-rendered -- CSS can't restyle the
	   play button itself, but growing the element's own height scales the
	   whole control bar (button included) up with it. 44px matches Apple's
	   minimum recommended touch-target size. */
  .rt-card__audio {
    height: 44px;
  }
}